<template>
  <Layout>
    <Content>
      <Row class="page-header">
        <i-col span="16">
          <div class="header-title">
            <span>『成为中国最有价值的专业化管理咨询公司』 —— 《正睿咨询》</span>
          </div>
          <div class="header-main">
            <img class="avatar img-circle" src="../../assets/images/user_img.jpg" alt="">
            <div class="content">
              <div class="content-title">{{hello_time}}{{ user_Data.username }}，祝你开心每一天！</div>
              <div class="">{{ user_Data.role }} | 注册时间 {{
                user_Data.date }}
              </div>
            </div>
          </div>
        </i-col>
        <i-col span="8">
          <div class="page-header-extra">
            <div>
              <p>文件上传数量</p>
              <p>{{file_number}}</p>
            </div>
            <div>
              <p>审核通过数</p>
              <p>{{enable_number}}</p>
            </div>
            <div>
              <p>审核未通过数</p>
              <p>{{disable_number}}</p>
            </div>
          </div>
        </i-col>
      </Row>

      <Row :gutter="10">
        <i-col span="6">
          <Card class="tab_body">
            <span>文件数</span>
            <strong>{{fileChart_number}}</strong>
            <div class="item-content" id="fileChart" style="width: 100%;height: 45px"></div>
            <div class="footer_text">今日上传 {{dayChart_number}} 个</div>
          </Card>
        </i-col>
        <i-col span="6">
          <Card  class="tab_body">
            <p>用户数</p>
            <strong>{{userChart_number}}</strong>
            <div class="item-content" id="userChart" style="width: 100%;height: 45px"></div>
            <div class="footer_text">本周新增 {{dayuserChart_number}} 人</div>
          </Card>
        </i-col>
        <i-col span="6">
          <Card  class="tab_body">
            <p>访问数</p>
            <strong>{{login_number}}</strong>
            <div class="item-content" style="width: 100%;height: 45px">
              <span>平均访问时长 {{time_number}} 小时 </span>
            </div>
            <div class="footer_text">今日访问 {{day_number}} 人</div>
          </Card>
        </i-col>
        <i-col span="6">
          <Card  class="tab_body">
            <p>磁盘空间</p>
            <strong>{{free_total}}%</strong>
            <div class="item-content">
              <Progress :percent="free_total" status="active" :hide-info="true" />
            </div>

            <div class="footer_text">可用空间 {{free_humber}}</div>
          </Card>
        </i-col>
      </Row>
      <Row :gutter="10" style="margin-top: 10px">
        <i-col span="12">
          <Card>
            <p slot="title">最近用户登录记录</p>
            <Table border size="small" stripe :columns="user_login_columns" :data="user_login_data" class="no-border-table"></Table>
          </Card>
        </i-col>
        <i-col span="12">
          <Card>
            <p slot="title">文件类型占比</p>
            <div class="item-content" id="classChart" style="width: 100%;height: 434px"></div>
          </Card>
        </i-col>
      </Row>

    </Content>
  </Layout>
</template>

<script>
  import ICol from "../../../node_modules/iview/src/components/grid/col.vue";

  export default {
    components: {ICol},
    name: '',
    data() {
      return {
        user_Data: {username: ''},
        hello_time: '',
        fileChart : '' ,
        userChart : '' ,
        classChart : '' ,
        file_number : '' ,
        enable_number : '' ,
        disable_number : '' ,
        login_number : '' ,
        time_number : '' ,
        day_number : '' ,
        free_humber : '' ,
        fileChart_number : 0 ,
        dayChart_number : 0 ,
        userChart_number : 0 ,
        dayuserChart_number : 0 ,
        free_total : 0 ,
        total_number : '' ,
        user_login_columns: [
          {
            title: '用户名称',
            key: 'username'
          },
          {
            title: '所属角色',
            key: 'role'
          },
          {
            title: '登录时间',
            key: 'login_time'
          }
        ],
        user_login_data: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ]
      }
    },
    methods: {
      fileChart_fn() {
        // 文件数量
        var  _this = this ;

        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/file/fileChart'
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            _this.fileChart_number = json.fileChart_number ;
            _this.dayChart_number = json.dayChart_number ;

            _this.fileChart.setOption({
              color: ['#1890FF'],
              tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                top: '0%',
                containLabel: true
              },
              xAxis : [
                {
                  show : false ,
                  type : 'category',
                  data : json.timeChart_data,
                  axisTick: {
                    alignWithLabel: true
                  }
                }
              ],
              yAxis : [
                {
                  show : false ,
                  type : 'value'
                }
              ],
              series : [
                {
                  name:'上传文件数',
                  type:'bar',
                  data:json.numberChart_data
                }
              ]
            });
          } else {
            this.$Loading.error();
          }
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))
        _this.fileChart = this.$echarts.init(document.getElementById('fileChart')) ;
        // 绘制图表


      },
      userChart_fn() {
        // 用户数量
        var  _this = this ;


        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/User/userChart'
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            _this.userChart_number = json.userChart_number ;
            _this.dayuserChart_number = json.dayuserChart_number ;

            _this.userChart = this.$echarts.init(document.getElementById('userChart'))
            // 绘制图表
            _this.userChart.setOption({
              color: ['#B68FEC'],
              tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                top: '0%',
                containLabel: true
              },
              xAxis : [
                {
                  show : false ,
                  type : 'category',
                  data : json.timeChart_data,
                  axisTick: {
                    alignWithLabel: true
                  }
                }
              ],
              yAxis : [
                {
                  show : false ,
                  type : 'value'
                }
              ],
              series : [
                {
                  name:'新增用户数',
                  type:'line',
                  barWidth: '60%',
                  areaStyle: {normal: {}},
                  data:json.numberChart_data
                }
              ]
            });
          } else {
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))

      },
      classChart_fn() {
        // 文件类型
        var _this = this ;

        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/classChart',
          data: {
            user_id: this.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            _this.classChart = this.$echarts.init(document.getElementById('classChart'))
            // 绘制图表
            _this.classChart.setOption({
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                x: 'left',
                data:json.file_class_list
              },
              series: [
                {
                  name:'文件类型',
                  type:'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  data:json.file_class_number_list
                }
              ]
            });
          } else {
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))




      },
      get_time() {
        let time_format = ''
        let time = new Date();
        let hr = time.getHours();
        if ((hr >= 0) && (hr <= 4))
          time_format = "深夜了，注意身体，"
        if ((hr >= 4) && (hr < 7))
          time_format = "清晨好， "
        if ((hr >= 7) && (hr < 12))
          time_format = "早安，"
        if ((hr >= 12) && (hr <= 13))
          time_format = "午饭时间到了，"
        if ((hr >= 13) && (hr <= 17))
          time_format = "下午好，"
        if ((hr >= 17) && (hr <= 18))
          time_format = "进入傍晚了，"
        if ((hr >= 18) && (hr <= 20))
          time_format = "吃过晚饭了吗，"
        if ((hr >= 20) && (hr <= 24))
          time_format = "在加班吗？辛苦了，"

        this.hello_time = time_format;
      },
      user_data_statistics(){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/12/24 17:41
        *=======================================================
        *@function  获取用户基本数据  上传数量 通过数 未通过数
        *   访问人数  最近访问记录
        *=====================================================*/

        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/user/user_data_statistics',
          data: {
            user_id: this.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.file_number  = json.file_number ;
            this.enable_number = json.enable_number ;
              this.disable_number  = json.disable_number ;
              this.login_number  = json.login_number ;
              this.time_number  = json.time_number ;
              this.day_number  = json.day_number ;
              this.free_humber  = json.free_humber ;
              this.total_number  = json.total_number ;
              this.free_total  = json.free_total ;
              this.user_login_data  = json.login_10_number ;
          } else {
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))
      }
    },
    mounted() {
      this.CD_.user_Data = JSON.parse(window.localStorage.getItem('user_Data'));
      this.user_Data = this.CD_.user_Data;

      this.get_time();
      this.fileChart_fn();
      this.userChart_fn();
      this.classChart_fn();

      this.user_data_statistics();

      var _this = this ;
      window.onresize = function(){
        _this.fileChart.resize();
        _this.userChart.resize();
        _this.classChart.resize();
      }
    }
  }
</script>

<style scoped>
  .page-header {
    padding: 15px 30px;
    background: #FFF;
    margin: 0 0 15px;
  }

  .project-overview .table-row-title {
    white-space: nowrap;
  }

  .page-header .header-title {
    font-size: 14px;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 16px;
  }

  .page-header .header-main {
    display: flex;
  }

  .page-header .header-main .avatar {
    width: 72px;
    height: 72px;
  }

  .page-header .header-main .content {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    line-height: 36px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }

  .page-header .header-main .content .content-title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
  }

  .page-header .page-header-extra {
    margin-top: 36px;
    zoom: 1;
    float: right;
  }

  .page-header .page-header-extra > div {
    padding: 0 32px;
    position: relative;
    float: left;
  }

  .page-header .page-header-extra > div > p:first-child {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 4px;
  }

  .page-header .page-header-extra > div:last-child {
    padding-right: 0;
  }

  .page-header .page-header-extra > div > p {
    color: rgba(0, 0, 0, 0.85);
    font-size: 30px;
    line-height: 38px;
    margin: 0;
  }

  .page-header .page-header-extra:before, .page-header-extra:after {
    content: " ";
    display: table;
  }

  .page-header .page-header-extra > div:after {
    background-color: #e8e8e8;
    position: absolute;
    top: 8px;
    right: 0;
    width: 1px;
    height: 40px;
    content: '';
  }

  .page-header .page-header-extra > div:last-child:after {
    width: 0;
  }

  .page-header .page-header-extra:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

  .page-header .page-header-extra > div > p > span {
    color: rgba(0, 0, 0, 0.45);
    font-size: 20px;
  }

  .tab_body span{
    font-size: 16px;
    color: #999999;
    display: block;
  }
  .tab_body strong{
    font-weight: 400;
    font-size: 30px;
  }
  .tab_body .footer_text{
    font-size: 14px;
    color: #333333;
    border-top: 1px solid #e5e5e5;
    padding-top: 15px;
  }
  .tab_body .item-content {
    position: relative;
    width: 100%;
    height: 45px;
  }
</style>
